<template>
  <a-range-picker v-model:value="range" v-bind="$attrs" @change="onChange" />
</template>

<script lang="ts">
export default {
  inheritAttrs: false
}
</script>

<script setup lang="ts">
import type { Dayjs } from 'dayjs'
type RangeValue = Dayjs[]

const range = ref<RangeValue>()

const props = withDefaults(defineProps<{
  start?: string,
  end?: string,
  valueFormat?: string
}>(), {
  start: '',
  end: '',
  valueFormat: 'YYYY-MM-DD'
})

const emit = defineEmits(['update:end', 'update:start'])
watch(() => props.start, (val) => {
  if (!val) {
    range.value = []
    emit('update:end', '')
  }
})

function onChange(dates: RangeValue) {
  const [start, end] = dates || {}
  if (start) {
    emit('update:start', start.format(props.valueFormat))
    emit('update:end', end.format(props.valueFormat))
  } else {
    emit('update:end', ''),
    emit('update:start', '')
  }
}
</script>

<style lang="less"></style>